<template>
  <div>
    <!-- 搜索框和按钮 -->
    <el-form size="mini" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="toAdd">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          v-model="params.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="params.status" placeholder="请选择状态">
          <el-option label="正常" value="正常"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      size="small"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="index" :index="1" label="编号"></el-table-column>
      <el-table-column prop="username" label="用户名" width="180"
        ><template slot-scope="scope">
          {{ scope.row.username || "暂无" }}
        </template></el-table-column
      >
      <el-table-column prop="realname" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.realname || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column prop="telephone" label="手机号">
        <template slot-scope="scope">
          {{ scope.row.telephone || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          {{ scope.row.gender || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === '正常'"
            >正常</el-tag
          >
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <a class="toEdit" @click="toEdit(scope.row)">编辑</a>
          <a class="toDelete" @click="deleteById(scope.row.id)">删除</a>
           <a class="toDetails" @click="toDetails(scope.row)">详情</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog @close="resetForm" :title="title" :visible.sync="visible">
      <el-form ref="myForm" :model="form" :rules="rules">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
            男<input name="hobby" type="radio" value="男" />     女<input
            name="hobby"
            type="radio"
            value="女"
          /><br />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  pageQuery,
  saveOrUpdate,
  deleteById as deleteByIdW,
  addUserWidthRole,
} from "@/api/user";
import { mapGetters } from "vuex";
import { uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      form: {},
      tableData: [],
      params: {
        roleId: 1,
        page: 1,
        pageSize: 10,
      },
      loading: false,
      uploadFileURL,
      total: 0,
      title: "",
      formLabelWidth: "120px",
      visible: false,
      imageUrl: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapGetters(["columns"]),
  },
  methods: {
    toDetails(row){
       this.$router.push({
        path:"/admin/waiter/Details",
        //传递当前行的数据
        query:row
       })
    },
    toSubmit() {
      this.$refs.myForm.validate(async (valid) => {
        if (valid) {
          // 发送保存更新请求
          let res = await saveOrUpdate(this.form);
          this.$message({
            type: "success",
            message: res.message,
          });
          this.visible = false;
          this.getProductData();
        } else {
          this.$message({
            type: "error",
            message: "请输入必传字段",
          });
        }
      });
    },
    toEdit(row) {
      this.form = { ...row };
      this.title = "修改员工信息";
      this.visible = true;
    },
    toAdd() {
      this.visible = true;
      this.title = "添加员工信息";
      this.form = {};
      this.imageUrl = "";
    },
    toSearch() {
      this.params.page = 1;
      this.getProductData();
    },
    async getProductData() {
      this.loading = true;
      for (let key in this.params) {
        if (!this.params[key]) {
          delete this.params[key];
        }
      }
      let res = await pageQuery(this.params);
      console.log(res, "66666");
      this.tableData = res.data.list;
      this.total = res.data.total;
      this.loading = false;
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.page = 1;
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getProductData();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.photo = res.data;
    },

    resetForm() {
      this.$refs.myForm.resetFields();
      this.imageUrl = "";
    },
    deleteById(id) {
      this.$confirm("此操作将删除用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteByIdW({ id });
          this.$message({
            type: "success",
            message: res.message,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getProductData();
    this.$store.dispatch("column/getAllColumn", { page: 1, pageSize: 10000 });
  },
};
</script>
<style lang="scss">
.toDelete {
  color: red;
}
</style>